<template>
  <div>
      <el-form :model="RowTableData" ref="RowTableData"  label-width="12rem"  size="mini" :rules="addRules">
            <el-row >
                <el-col :span="7">
                  <el-form-item prop="cltCode" label="客户代码：">
                    <el-input maxlength="32" v-model="RowTableData.cltCode" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="cltName" label="企业名称：">
                    <el-input maxlength="32" v-model="RowTableData.cltName" clearable :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="cltEgsname" label="英文名称：">
                    <el-input maxlength="32" v-model="RowTableData.cltEgsname" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            <el-row>
              <el-col :span="7">
                  <el-form-item prop="cltShtname" label="英文简称：">
                    <el-input maxlength="32" v-model="RowTableData.cltShtname" clearable></el-input>
                  </el-form-item>
                </el-col>
              <el-col :span="7">
                  <el-form-item prop="cltContact" label="联系人：">
                    <el-input maxlength="32" v-model="RowTableData.cltContact" clearable></el-input>
                  </el-form-item>
                </el-col>
              <el-col :span="7">
                  <el-form-item prop="cltCtctel" label="联系电话：">
                    <el-input maxlength="32" v-model="RowTableData.cltCtctel" clearable></el-input>
                  </el-form-item>
                </el-col>
            </el-row>

            <el-row>
              <el-col :span="7">
                  <el-form-item prop="cltType" label="客户类型：" >
                    <el-input maxlength="32" v-model="RowTableData.cltType" clearable :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="所属港口：" prop="cltPorts">
                      <el-select  filterable allow-create clearable v-model="RowTableData.cltPorts" >
                        <el-option v-for="(item,index) in port" :key="index" :label="item.potCname" :value="item.potCd"></el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="cltAgmclt" label="协议客户：">
                    <el-radio-group v-model="RowTableData.cltAgmclt" >
                      <el-radio label="Y">是</el-radio>
                      <el-radio label="N">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="7">
                  <el-form-item prop="cltAccount" label="客户账户：">
                    <el-input maxlength="32" v-model="RowTableData.cltAccount" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="cltVlflag" label="有效标志：">
                    <el-radio-group  v-model="RowTableData.cltVlflag"   clearable>
                      <el-radio label="Y">是</el-radio>
                      <el-radio label="N">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="22">
                  <el-form-item prop="cltAddress" label="客户地址：">
                    <el-input  maxlength="128" v-model="RowTableData.cltAddress" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="7">
                  <el-form-item prop="cltCliCode" label="企业代码：">
                    <el-input  maxlength="22" v-model="RowTableData.cltCliCode" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="cltRegistorno" label="工商登记号：">
                    <el-input  maxlength="22" v-model="RowTableData.cltRegistorno" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="cltCliCtctel" label="企业电话：">
                    <el-input  maxlength="22" v-model="RowTableData.cltCliCtctel" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="7">
                  <el-form-item prop="cltCliLegalname" label="法人姓名：">
                    <el-input  maxlength="22" v-model="RowTableData.cltCliLegalname" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="cltCliLegalid" label="法人身份证：">
                    <el-input  maxlength="22" v-model="RowTableData.cltCliLegalid" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="cltCliLegalphone" label="联系电话：">
                    <el-input  maxlength="22" v-model="RowTableData.cltCliLegalphone" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="22">
                  <el-form-item prop="cltCliAddress" label="企业地址：">
                    <el-input  maxlength="22" v-model="RowTableData.cltCliAddress" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="7">
                  <el-form-item >
                   <el-button :disabled="!RowTableData.cltCliTaxnoimage" type="default" plain size="mini" @click="tuCk('cltCliTaxnoimage')">查看营业执照图片</el-button>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item >
                   <el-button :disabled="!RowTableData.cltCliLegalimagep" type="default" plain size="mini" @click="tuCk('cltCliLegalimagep')">查看法人身份图片正面</el-button>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item >
                     <el-button :disabled="!RowTableData.cltCliLegalimageb" type="default" plain size="mini" @click="tuCk('cltCliLegalimageb')">查看法人身份图片背面</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="7">
                  <el-form-item prop="cltSatue" label="是否审核：">
                    <el-radio-group v-model="RowTableData.cltSatue">
                      <el-radio label="Y">是</el-radio>
                      <el-radio label="N">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item prop="cltSatRemark" label="审核意见：">
                    <el-input  maxlength="22" type="textarea" v-model="RowTableData.cltSatRemark" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
      </el-form>

          <div  class="dialog-footer">
            <div class="btn">
                <el-button type="primary" size="mini" @click="toExamine('RowTableData')">审核</el-button>
               <el-button size="mini" @click="close">关闭</el-button>
            </div>
          </div>
              <el-dialog
     v-el-drag-dialog
      ref="uploadDialog"
      width="30%"
      append-to-body
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showPic"
      v-if="showPic"
      title="查看图片"
      :before-close="uploadClose">
        <div class="pic">
          <img :src="url" alt="查看图片">
        </div>
         <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="uploadClose">关闭</el-button>
         </div>
    </el-dialog>
    </div>
</template>

<script>
import {editTmClientDetailA,getPortsInfo} from '@/request/api'
export default {
  props: ['RowTableData','diong'],
  data(){
    return{
      port:[
        {cCode:'1',
          cCName:'上海港'},
      ],
      showPic:false,
      url:'',//查看图片路径
      //表单验证
      addRules:{
        cltCode:[
          { required: true, message: '请填写客户代码', trigger:'blur'}
        ],
        cltName:[
          { required: true, message: '请填写客户企业名称', trigger:'blur'}
        ],
        cltContact:[
          { required: true, message: '请填写联系人', trigger:'blur'}
        ],
        cltCtctel:[
          { required: true, message: '请填写联系电话', trigger:'blur'}
        ],
        cltType:[
          { required: true, message: '请填写客户类型', trigger:'blur'}
        ],
        cltCliCode:[
          { required: true, message: '请填写企业代码', trigger:'blur'}
        ],
        cltRegistorno:[
          { required: true, message: '请填写工商登记号', trigger:'blur'}
        ],
        cltCliCtctel:[
          { required: true, message: '请填写企业电话', trigger:'blur'}
        ],
        cltCliLegalname:[
          { required: true, message: '请填写法人姓名', trigger:'blur'}
        ],
        cltCliLegalid:[
          { required: true, message: '请填写法人身份证', trigger:'blur'}
        ],
        cltCliLegalphone:[
          { required: true, message: '请填写法人联系电话', trigger:'blur'}
        ],
        cltCliAddress: [
          {
            required: true,
            message: '企业地址不能为空',
            trigger: 'blur'
          }
        ],
        
      }
    }
  },
  mounted(){
    //下拉框
    getPortsInfo().then(res=>{
      // console.log(res,639)
      this.port=res.data
    })
  },
  methods:{
    //关闭查看窗口
    uploadClose(){
      this.showPic=false
    },
    //查看图片
    tuCk(str){
      // cltCliLegalimageb,
      // cltCliLegalimagep,
      // cltCliTaxnoimage 
      console.log(1111)
      // console.log(this.RowTableData[str],2687)
      this.url=this.RowTableData[str]
      console.log(this.url)
      this.showPic=true
    },
    //点击审核
    toExamine(RowTableData){
      console.log(this.RowTableData)
      this.$refs[RowTableData].validate((valid) => {
        if (valid) {
          editTmClientDetailA(this.RowTableData).then(res=>{
            if(res.success=='1'){
              this.$message ({
                type: 'success',
                message: '审核成功'
              })
            }
            this.close()
          }).catch(err=>{
            console.log(err)
          })
         
        } else {
          return false
        }
      })
    },
    //关闭弹窗
    close(){
      this.$emit('close','u')
    },
  }
}
</script>

<style scoped lang='scss'>
  .dialog-footer {
    position: relative;
    width: 100%;
    height: 40px;
    .btn {
      position: absolute;
      right:15px;
    }
  }
  .pic{
    width:100%;
    img{
      width:100%;
    }
  }
</style>